<template>
	<view class="tab">
	    <scroll-view 
		scroll-x="true"
		 class="tab-scroll"
		 :scroll-with-animation="true"
		 :scroll-into-view="currentIndex "
		 
		 >
	        <view class="tab-scroll-box">
	            <view
				 @click="changeActiveIndex(index)" 
				 class="tab-scroll-item" 
				 :class="{active:activeIndex==index}"
				  v-for="(item,index) in labelList"
				   :key="index"
				   :id="`item${index}`"
				   >
	                {{item.name}}
	            </view>
	        </view>
	    </scroll-view>
	
	    <view class="tab-icon">
	        <uni-icons type="gear" size="26" color="666"></uni-icons>
	    </view>
	</view>

</template>

<script>
	export default {
		onLoad() {
			console.log('labelList')
		},
		name:"TabBar",
		props:{
			labelList:Array,
			activeIndex:Number
			},
			watch:{
					
				activeIndex(index){
					console.log('aaa');
				this.currentIndex=`item${index}`
				}
				
			},
		data() {
			return {
				currentIndex:'item0'
				
				// list:['aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa','aa'],
			};
		},
		methods:{
				
			changeActiveIndex(index){
				console.log(index,'index');
				this.$emit('changeActiveIndex',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
    @import './css/TabBar.scss';
</style>
